import {messages} from "share/common";
import React, {Component} from 'react';
import {Select} from "antd";
import Chooser from "components/chooser";
import CompactInput from "components/compact-input";
import "styles/request-and-expense-settings/claim-amount-verification.scss"

const Option = Select.Option;

class ClaimAmountVerificationRuleDetailExpenseLabel extends Component {

  selectOptions = [
    {name: messages('expense-8.key72')/*包含*/, key: 'CONTAINS'},
    {name: messages('expense-8.key73')/*不包含*/, key: 'NOT_CONTAINS'}
  ];

  handleChange = (type, changeValue, id) => {
    let { value } = this.props;
    value.map(item => {
      if (item.id === id) {
        item[type] = changeValue;
      }
    });
    this.props.onChange({ value });
  };

  renderItem = item => {
    const { disabled } = this.props;
    return (
      <CompactInput>
        <Select
          disabled={disabled}
          value={item.condExpLabel}
          style={{ width: '100%' }}
          onChange={value => this.handleChange('condExpLabel', value, item.id)}
        >
          {this.selectOptions.map(item => <Option key={item.key}>{item.name}</Option>)}
        </Select>
        <Chooser
          type="invoice_labels"
          valueKey='id'
          labelKey='name'
          value={item.condExpLabelLimit}
          placeholder={messages('expense-8.key409')/*请选择费用标签*/}
          disabled={disabled}
          onChange={value => this.handleChange('condExpLabelLimit', value, item.id)}
        />
      </CompactInput>
    )
  }

  render() {
    return (
      <div className="verification-rule-detail-label">
        {this.props.value.map(this.renderItem)}
      </div>
    );
  }
}

export default ClaimAmountVerificationRuleDetailExpenseLabel;
